Practical XMPP by 2016

Author:2016
Language: eng
Format: epub, mobi
Publisher: Packt Publishing

The middle part isn't really XMPP-related, but we need to handle the room selection and nickname validation before attempting to join the room. So, we need to do a few things: first, when the user clicks on a room, add a selected CSS class to the <li/> element (and clear them from any other items in the list); second, store the selected room name; and third, on clicking the button, we need to check that the user has entered a nickname and selected a room (otherwise, we'll add a popup error message).

First to the <li/> element click:

$(document).on('click', '#room-list li', function(e) { /* Clear any existing selected rooms */ $('#room-list li.selected').attr('class', '') /* Add'selected'CSS class to our new room */ $(e.target).attr('class', 'selected') console.log('Chosen room is now', $(e.target).attr('data-jid')) })

Next, we'll listen for a click on the <button/> and validate that the user has provided the required information:

$('#room-list button').click(function() { var chosenRoom = $('#room-list li.selected') var nickname = $('#room-list input').val() if (0 === chosenRoom.length) { return alert('You must select a room') } if (!nickname) { return alert('You must enter a nickname') } var roomJid = chosenRoom.attr('data-jid') joinChatRoom(roomJid) /* not written yet! */ })

Cool! Now we're ready for the final step of attempting to join the room itself. For this, we use the XMPP-FTW event of xmpp.muc.join. We'll assume that if we start receiving presences (which are sent as xmpp.muc.roster events), then we've joined the room successfully; if not, we'll show the error message to the user. In our example, we'll simulate a nickname conflict.

Picking up from our preceding function, let's make a call to join the room and start things up:

var joinChatRoom = function(roomJid, nickname) { var request = { room: roomJid, nick: nickname } window.mucDetails = request socket.send('xmpp.muc.join', request) } socket.on('xmpp.muc.error', function(e) { console.error('Chat room error', e) if (e.error.condition === 'conflict') { return alert('Nickname already in use') } alert('Chat room error: ' + e.error.condition) }) socket.on('xmpp.muc.roster', function(user) { showChatWindow() /* not written yet */ addUser(user) /* not written yet */ })

Now let's simulate our nickname conflict. Errors in XMPP follow a standard format that is described in RFC-6120, but for those more familiar with HTTP error codes, you may find XEP-0086 (http://xmpp.org/extensions/xep-0086.html) useful to review. This also shows the format of XMPP errors. In the case of a nickname conflict, we'll receive an error with a <condition/> child element with a value of conflict. In our preceding function, we look for this and report back to the user of this issue.

Let's log into a chat room with our test user from Empathy, and then attempt to join the same room using our new web-based UI:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.